const React = require('react');
const ReactDOM = require('react-dom');
const Component = React.Component;
const Menu = require('Menu');
const SubMenu = Menu.SubMenu;
const MenuItemGroup = Menu.MenuItemGroup;
const Tile = require("./Tile");
const FontIcon = require("FontIcon");
const Switch = require("Switch");
const Button = require("Button");

class Page extends Component{
    componentDidMount (){
        for(let i in this.refs){
            let ref = this.refs[i];
            let block = ReactDOM.findDOMNode(ref);
            SyntaxHighlighter.highlight({}, block);
        }
    }

    /**
     * 设置主题
     * @param value
     */
    switchTheme(value){
        this.refs.menu.setTheme(value ? "light" : "dark");
    }

    openAndSelect(){
        if(this.lastSelect){
            this.refs.menu.selectItem(this.lastSelect.getKey());
        }
    }

    select(item){
        this.lastSelect = item;
    }

    /**
     * 设置主题
     * @param value
     */
    switchTheme2(value){
        this.refs.hmenu.setTheme(value ? "light" : "dark");
    }

    render() {
        return (
            <div className="container">
                <Menu style={{width: 300}}
                      onOpen={function(item){console.log(item);}}
                      onClick={function(){console.log("click");}}
                      onSelect={function(){console.log("select");}}
                      unSelect={function(){console.log("unSelect");}}
                      theme="dark"
                >
                    <SubMenu title={<span><FontIcon icon="th-large"></FontIcon>Menu One</span>}>
                        <MenuItemGroup title="Item Group">
                            <Menu.Item>item1</Menu.Item>
                            <Menu.Item>item2</Menu.Item>
                        </MenuItemGroup>
                        <SubMenu title={<span>SubMenu</span>}>
                            <Menu.Item>item3</Menu.Item>
                            <Menu.Item>item4</Menu.Item>
                        </SubMenu>
                    </SubMenu>
                    <SubMenu title={<span><FontIcon icon="codepen"></FontIcon>Menu Two</span>} open={true}>
                        <MenuItemGroup title="Item Group">
                            <Menu.Item>item21</Menu.Item>
                            <Menu.Item>item22</Menu.Item>
                        </MenuItemGroup>
                    </SubMenu>
                </Menu>


                <div style={{padding: 30, background: "#fff"}}>
                    <Menu ref="hmenu" style={{marginTop: 30}} layout="horizontal">
                        <Menu.Item><FontIcon icon="th-large"></FontIcon>Navigation One</Menu.Item>
                        <SubMenu disabled={true} title={<span><FontIcon icon="codepen"></FontIcon>Navigation Two</span>}></SubMenu>
                        <SubMenu title={<span><FontIcon icon="codepen"></FontIcon>Navigation Three</span>}>
                            <MenuItemGroup title="Item 1">
                                <Menu.Item>item21</Menu.Item>
                                <Menu.Item>item22</Menu.Item>
                            </MenuItemGroup>
                            <MenuItemGroup title="Item 2">
                                <Menu.Item>item21</Menu.Item>
                                <Menu.Item>item22</Menu.Item>
                            </MenuItemGroup>
                        </SubMenu>
                    </Menu>
                    <Switch checkedText="dark" unCheckedText="light" onChange={this.switchTheme2.bind(this)}></Switch>
                </div>

                <Menu ref="menu" style={{width: 300, marginTop: 30}} modal="multi" theme="dark" onSelect={this.select.bind(this)}>
                    <SubMenu title={<span><FontIcon icon="th-large"></FontIcon>Navigation One</span>} open={true}>
                        <Menu.Item>item1</Menu.Item>
                        <Menu.Item>item2</Menu.Item>
                        <SubMenu title={<span>SubMenu</span>}>
                            <Menu.Item>item3</Menu.Item>
                            <Menu.Item>item4</Menu.Item>
                        </SubMenu>
                    </SubMenu>
                    <SubMenu title={<span><FontIcon icon="codepen"></FontIcon>Navigation Two</span>}>
                        <MenuItemGroup title="Item Group">
                            <Menu.Item>item21</Menu.Item>
                            <Menu.Item>item22</Menu.Item>
                        </MenuItemGroup>
                    </SubMenu>
                </Menu>

                <Switch checkedText="dark" unCheckedText="light" onChange={this.switchTheme.bind(this)}></Switch>

                <Button onClick={this.openAndSelect.bind(this)}>选中和打开初始节点</Button>



                <Menu style={{width: 300}}
                      layout="vertical"
                >
                    <SubMenu title={<span><FontIcon icon="th-large"></FontIcon>Menu One</span>}>
                        <Menu.Item>item1</Menu.Item>
                        <Menu.Item>item2</Menu.Item>
                        <SubMenu title={<span>SubMenu</span>}>
                            <Menu.Item>item3</Menu.Item>
                            <Menu.Item>item4</Menu.Item>
                        </SubMenu>
                    </SubMenu>
                    <SubMenu title={<span><FontIcon icon="codepen"></FontIcon>Menu Two</span>}>
                        <Menu.Item>item21</Menu.Item>
                        <Menu.Item>item22</Menu.Item>
                    </SubMenu>
                </Menu>
            </div>
        )
    }
}

module.exports = Page;